<template>
    <div class='tab4-pirces'>
        <div class='tab-item tab-item-title'>A quel étage</div>
        <div class='tab-item tab-item-content'>
            <v-btn-toggle
                v-model='etageData.value'
                class='text-capitalize'
                tile
                color='deep-purple accent-3'
                group
                multiple
            >
                <v-btn
                    height='35'
                    style='font-size:15px; font-weight:500; padding: 0px 1px; margin: 0px 4px;border: 1px dashed #aab2bd;'
                    v-for='item in textArr'
                    :value='item'
                    :key='item'
                    class='v-btn-add-style'
                    multiple
                >{{item}}</v-btn>
            </v-btn-toggle>
        </div>
    </div>  
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    data() {
        return {
            textArr: ['RDC', 'R1', 'R2', 'R3', 'R4'],
        };
    },
    computed: {
        ...mapState({
            etageData: state => state.searchData.etageData,
        }),
    },
    methods: {
        ...mapMutations({
            commitTypeData: 'searchData/commitTypeData',
            commitInit: 'searchData/commitInit',
        }),
        initData() {
            this.commitTypeData({
                k: 'etageData',
                data: {
                    value: '',
                },
            });
        },
    },
    watch: {
        'etageData.value'() {
            this.commitInit({ k: 'etageInit', v: this.etageData.value === '' || typeof this.etageData.value === 'undefined' });
            this.commitTypeData({
                k: 'etageData',
                data: {
                    value: this.etageData.value,
                },
            });
        },
    },
};
</script>


<style lang='scss'></style>